<template>
  <div class="recommend">

    <div v-for="item in recommend.list"  class="recommendItem">
      <a :href="item.link">
        <img :src="item.image">
        <div>{{item.title}}</div>
      </a>
    </div>

    <!-- 列表实现方法（不利于自适应）
    <ur v-for="item in recommend.list" class="recommend">
      <li class="recommendItem"><a :href="item.link"><img :src="item.image"><br>{{item.title}}</a></li>
    </ur>
  -->

  </div>
</template>

<style scoped>
  .recommend {
    display:flex;
    width:100%;
    text-align: center;
    padding-top:15px;
    padding-bottom:15px;
    border-bottom: 8px solid #eee;
  }

  .recommendItem {
    flex:1;
  }
  .recommend a{
    color: rgba(0,0,0,.87);
    text-decoration:none;
  }
  .recommendItem img{
      height: 80px;
      width: 80px;
    }
</style>

<script>
  export default {
    name: 'RecommendView',
    components: {

    },
    methods: {

    },
    props: {
      recommend: {
        default() {
          return []
        }
      }
    }
  }
</script>